{% extends 'goods/index.html' %}
{% load static %}
{% block haed_files %}
        <link rel="stylesheet" href="{% static 'css/tab_style.css' %}" />
        <link rel="stylesheet" href="{% static 'css/tab_progression.css' %}" />
        <link rel="stylesheet" href="{% static 'css/detail.css' %}" />
        <link rel="stylesheet" href="{% static 'css/index_mine.css' %}" />
        
{% endblock haed_files %}
{% block title %}{{good.name}}{% endblock title %}
{% block page_title %}商品详情{% endblock page_title %}
{% block index_block %}
<img class="add_cart_img" src="{% static '/image/购物车.png' %}" alt="">
<a class="to-top">Top</a>
<div class="index_content">
            <div class="landscape_navigation">
                <div class="contain">
                    <div>
                        <div>
                            全部商品分类
                            <img src="{% static 'image/箭头 上.png' %}" alt="" />
                        </div>
                        <ul style="display: none">
                            {% for type in types %}
                            <li>
                                <a class="{{ type.logo }}" href="{% url 'goods:list' type.id %}">{{type.name}}</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <ul>
                        <li>
                            <a href="{% url 'goods:index' %}">首页</a>
                        </li>
                        <li>|</li>
                        <li>
                            <a href="">手机生鲜</a>
                        </li>
                        <li>|</li>
                        <li>
                            <a href="">抽奖</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="detail_content">
                <div class="goods_details">
                    <ul>
                        {% block hierarchical_relationship_rewriting %}
                        <li>
                            <a href="{% url 'goods:index' %}">全部分类</a>
                        </li>
                        <li>
                            <a href="">></a>
                        </li>
                        <li>
                            <a href="{% url 'goods:list' good.type.id %}">{{good.type.name}}</a>
                        </li>
                        <li>
                            <a href="">></a>
                        </li>
                        <li>
                            <a href="">商品详情</a>
                        </li>
                        {% endblock hierarchical_relationship_rewriting %}
                    </ul>
                    {% block list_rewrite_0 %}
                    <div class="img_detail">
                        <div class="img">   
                            <img src="{{good.image.url}}" alt="" />
                        </div>
                        <form action="{% url 'order:order' %}" method="post">
                            <div class="details">
                                <div class="title_unit">{{good.name}}</div>
                                <div class="detail_infos">{{good.desc}}</div>
                                <div class="price_area">
                                    <div>￥<span>{{good.price}}</span></div>
                                    <span>单 位：{{good.unite}}</span>
                                </div>
                                <div class="quantity">
                                    <div>数量：</div>
                                    <input data-sku-stock={{good.stock}} type="text" name="quantity" value="1" />
                                    <div class="btns">
                                        <button type="button">+</button>
                                        <button type="button" style="border-top: 0">-</button>
                                    </div>
                                </div>
                                <div class="other_specifications">
                                    <p>其他规格:</p>
                                    {% for good in other_spu %}
                                        <a href="{% url 'goods:detail' good.id %}">{{good.unite}}</a>
                                    {% empty %}                             
                                    <p>无其他规格</p>
                                    {% endfor %}
                                </div>
                                <div class="total_price">
                                    <span>总价：</span>
                                    <p>{{good.price}}</p>
                                    元
                                </div>
                                {% csrf_token %}
                                <button type="button" class="btn btn-danger">
                                    <input type="hidden" name="sku_id" value="{{good.id}}">
                                    购买
                                </button>
                                <button id="{{good.id}}" type="button" class="btn btn-warning add_cart">
                                    加入购物车
                                </button>
                            </div>
                        </form>
                    </div>
                    {% endblock list_rewrite_0 %}
                    <div class="introduction">
                        <div class="introductions">
                            <div>新品推荐</div>
                            <ul>
                            {% for good in good_relative %}
                                <li>
                                    <a href="{% url 'goods:detail' good.id %}"
                                        ><img src="{{good.image.url}}" alt=""
                                    /></a>
                                    <a href="{% url 'goods:detail' good.id %}">{{good.name}}</a>
                                    <span>￥{{good.price}}</span>
                                </li>
                            {% endfor %}
                            </ul>
                        </div>
                        {% block list_rewrite_1 %}
                        <div class="comments">
                            <div id="tabs">
                                <ul>
                                    <li>
                                        <a href="#tabs-1" title="">商品介绍</a>
                                    </li>
                                    <li>
                                        <a href="#tabs-2" title="">评论</a>
                                    </li>
                                </ul>

                                <div id="tabs_container">
                                    <div id="tabs-1">{{good.goods.detail|safe}}</div>

                                    <div id="tabs-2">
                                    <ul>
                                        {% for comment in comments %}
                                            <li>
                                                <span class="author">用户名：{{comment.order.user.username}}</span>
                                                <span>评论时间：{{comment.update_time}}</span>
                                                <p>评论内容： {{comment.comment|safe}}</p>
                                            </li>
                                        {% empty %}
                                        暂无评论！
                                        {% endfor %}
                                    </ul>
                                    </div>
                                </div>
                                <!--End tabs container-->
                            </div>
                            <!--End tabs-->
                        </div>
                        {% endblock list_rewrite_1 %}
                    </div>
                </div>
            </div>
        </div>
{% endblock index_block %}
{% block bottom_file %}
<script src="{% static 'js/tab_tabulous.js' %}"></script>
<script src="{% static 'js/detail.js' %}"></script>
        <script src="{% static 'js/to_top_jquery.toTop.min.js' %}"></script>
<script>
$('.to-top').toTop();
</script>
{% endblock bottom_file %}